<template>
	<view>
		<view class="text-center">
			<image 
				class="cu-avatar xl round margin-top" 
				:src="uinfo&&uinfo.avatar ? uinfo.avatar:'/src/static/logo.png'" 
				mode=""
			></image>
			<view class="margin text-xl">
				<button class="cu-btn line-orange" @click="handleAvatar">
					点击修改头像
				</button>
			</view>
		</view>
		<view class="padding-lr margin-lr">
			<view class="margin-tb">
				真实姓名
			</view>
			<custom-input v-model="name" holder="请输入真实姓名">
				<text class="iconfont icon-wode"></text>
			</custom-input>
		</view>
		<view class="padding-lr margin-lr">
			<view class="margin-tb">
				手机号码
			</view>
			<custom-input v-model="phone" holder="请输入手机号">
				<text class="iconfont icon-dianhua"></text>
			</custom-input>
		</view>
		<view class="padding margin-lr">
			<view class="cu-progress striped radius line-orange">
				<view v-if="isProgress" class="bg-orange" :style="{width:progressValue+'%'}">
					{{progressValue}} %
				</view>
				<text v-else class="text-center" @click="handleProgress">点击上传简历</text>
				
			</view>
		</view>
		<view class="flex justify-around padding margin-top">
			<button class="cu-btn bg-grey block " @click="">
				取消
			</button>
			<button class="cu-btn bg-orange block " @click="handleUpdate">
				确认
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed, ref, type Ref } from 'vue';
import {useStore} from 'vuex'
import { userUpdate } from '../../api/user_api';

// #ifdef H5
// @ts-ignore
import {pathToBase64} from 'image-tools'
import CloudSDK from 'leancloud-storage'
// #endif

const name:Ref<string> = ref('')
const phone:Ref<string> = ref('')
const avatar:Ref<string> = ref('')
const store = useStore()
const uinfo = computed(()=>store.state.user.uinfo)
const handleUpdate = async ()=>{
	let {objectId,sessionToken} = uinfo.value
	let res = await userUpdate(objectId,sessionToken,{
		"name":name.value,
		"phone":phone.value,
		"avatar":avatar.value  //
	})
	console.log('更新成功',res);
}

// #ifdef H5
//头像上传
const handleH5Avatar = ()=>{
	// 1. 选择图像文件
	uni.chooseImage({
		count:1,
		success:async(file)=>{
			// console.log(file);
			let temp = file.tempFilePaths[0] //2. 临时资源路径
			let base64 = await pathToBase64(temp) //3. 编码操作
			// console.log(base64);
			let data = { "base64":base64 }
			let res:any = await new CloudSDK.File('avatar.png',data)  //4. 构建云资源对象
				.save()      //5. 请求上传
				
			console.log(res);
			let {url} = res.attributes	//6. 在线图片链接
			store.commit('user/loginSuccess',{  //7.更新状态机、本地存储
				...uinfo.value,  //原本的用户信息
				avatar:url,
			})
			avatar.value = url   //8. 准备向数据库提交
		}
	})
}

// 上传简历
const isProgress:Ref<boolean> = ref(false)
const progressValue:Ref<number> = ref(0)
const handleProgress = ()=>{
	
	uni.chooseFile({
		count:1,
		success: async (file) => {
			let temp = file.tempFilePaths[0]
			console.log(temp);
			isProgress.value = true  //显示进度条
			progressValue.value = 10
			let base64 = await pathToBase64(temp)
			const data = { base64 }; //构建
			progressValue.value = 20
			let res = await new CloudSDK.File('resume.pdf',data).save()
			console.log(res);
			progressValue.value = 100
		}
	})
}

// #endif


const handleAvatar = ()=>{
	
	// #ifdef H5
	//适配WEB端的头像上传
	handleH5Avatar()
	// #endif
	
	// #ifndef H5
	// 适配鸿蒙端的头像上传
	uni.chooseImage({
		count:1,
		success:async(file)=>{
			// console.log(file);
			let temp = file.tempFilePaths[0] //2. 临时资源路径
			uni.uploadFile({
				url:'http://1.95.67.194:3000/upload',
				filePath:temp,
				name:'avatar',
				success: (res) => {
					console.log(res.data); //Node中间层下发的数据包
					let url = JSON.parse(res.data).url
					store.commit('user/loginSuccess',{  //7.更新状态机、本地存储
						...uinfo.value,  //原本的用户信息
						avatar:url,
					})
					avatar.value = url   //8. 准备向数据库提交
				}
			})
			
			
		}
	})
	
	// #endif
	

}



</script>

<style lang="scss">
page{
	background-color: #fff;
}      
.cu-progress{
	height: 150upx;
	text{
		display: block;
		width: 100%;
	}
}
</style>
